// import config from '../config';
import { ICanvas, ModelConstructor } from '../types';
import CanvasAbstract from './canvasAbstract';
import BoardModel from '../model/board';
import position from '../services/position';
import { CanvasEnum, CellStateEnum } from '../enum';
import cell from './cell';
// let timer: any = null;

class Board extends CanvasAbstract implements ICanvas {
  model(): ModelConstructor {
    return BoardModel;
  }

  render(): void {
    this.cteateModeles();
    super.renderModels();
    this.bindEvent();
  }

  protected cteateModeles() {
    position.getBoardPosition(this.boardMatrixs).forEach(position => {
      const Model = this.model();
      const instance = new Model(position.x, position.y);
      this.models.push(instance);
    });
  }

  // public start() {
  //   const startBtn = document.createElement('button');
  //   startBtn.innerText = '开始';
  //   super.btns.insertAdjacentElement('afterbegin', startBtn);
  //   startBtn.addEventListener('click', () => {
  //     if (timer) return;
  //     timer = setInterval(() => {
  //       this.runGame();
  //     }, config.timeOut);
  //   });
  //   return this;
  // }

  // public pause() {
  //   const startBtn = document.createElement('button');
  //   startBtn.innerText = '暂停';
  //   this.btns.insertAdjacentElement('afterbegin', startBtn);
  //   startBtn.addEventListener('click', () => {
  //     clearInterval(timer);
  //     timer = null;
  //   });
  //   return this;
  // }

  // public stop() {
  //   const startBtn = document.createElement('button');
  //   startBtn.innerText = '停止';
  //   this.btns.insertAdjacentElement('afterbegin', startBtn);
  //   startBtn.addEventListener('click', () => {
  //     clearInterval(timer);
  //     timer = null;
  //     this.init();
  //   });
  //   return this;
  // }

  // private runGame() {
  //   this.cellMatrix.forEach((itemY, y) => {
  //     itemY.forEach((_itemX, x) => {
  //       this.cellMatrix[y][x] = this.nextCellPosition(x, y);
  //     });
  //   });
  //   this.render(this.cellMatrix);
  // }

  // private nextCellPosition(x: number, y: number): CellStateEnum {
  //   const count =
  //     this.getCellState(x - 1, y - 1) +
  //     this.getCellState(x, y - 1) +
  //     this.getCellState(x + 1, y - 1) +
  //     this.getCellState(x - 1, y) +
  //     this.getCellState(x + 1, y) +
  //     this.getCellState(x - 1, y + 1) +
  //     this.getCellState(x, y + 1) +
  //     this.getCellState(x + 1, y + 1);
  //   if (count == 3) {
  //     return CellStateEnum.live;
  //   } else if (count == 2) {
  //     return this.cellMatrix[y][x] as CellStateEnum;
  //   } else {
  //     return CellStateEnum.death;
  //   }
  // }

  // private getCellState(x: number, y: number) {
  //   return (this.cellMatrix[y] || [])[x] || 0;
  // }

  private bindEvent() {
    document.getElementById('app')!.addEventListener(
      'click',
      e => {
        // if (timer) return;
        this.setCellPosition(e);
        cell.render(this.boardMatrixs);
      },
      false
    );
    // this.el.onmousedown = () => {
    //   this.el.onmousemove = (e: MouseEvent) => {
    //     // if (timer) return;
    //     this.setCellPosition(e);
    //     cell.render();
    //   };
    //   this.el.onmouseup = () => {
    //     this.el.onmousemove = null;
    //     this.el.onmouseup = null;
    //   };
    // };
  }

  private setCellPosition(e: MouseEvent) {
    const x = Math.floor((e.clientX - this.app.offsetLeft) / this.cellWidth);
    const y = Math.floor((e.clientY - this.app.offsetTop) / this.cellheight);
    this.boardMatrixs[y][x] =
      this.boardMatrixs[y][x] == CellStateEnum.live
        ? CellStateEnum.death
        : CellStateEnum.live;
  }

  // protected createCanvas() {
  //   this.el.width = config.board.width;
  //   this.el.height = config.board.height;
  //   this.el.setAttribute('id', 'board');
  //   this.ctx.fillStyle = 'rgba(0, 0, 0, 0)';
  //   this.ctx.fillRect(0, 0, config.board.width, config.board.height);
  //   this.app.insertAdjacentElement('afterbegin', this.el);
  // }

  // protected render(cellMatrix: Cell[][]) {
  //   this.ctx.clearRect(0, 0, config.board.width, config.board.height);
  //   cellMatrix.forEach((itemY, y) => {
  //     itemY.forEach((_itemX, x) => {
  //       this.renderCell(
  //         x * config.cell.width,
  //         y * config.cell.height,
  //         cellMatrix[y][x]
  //       );
  //     });
  //   });
  // }

  // protected renderCell(x: number, y: number, state: CellStateEnum) {
  //   state === CellStateEnum.death
  //     ? this.ctx.strokeRect(x, y, config.cell.width, config.cell.height)
  //     : ((this.ctx.fillStyle = 'red'),
  //       this.ctx.fillRect(x, y, config.cell.width, config.cell.height));
  // }
}

export default new Board(CanvasEnum.board);
